<template>
  <div>
   <van-cell-group>
     <van-field v-model="numVal" label="输入数字" :maxlength="3" placeholder="请输入3位数" @keydown.prevent.enter="submitFn" />
   </van-cell-group>
   <van-col span="4">
    <van-button type="primary" size="small" @click="resultUnfindFn(3)">单数结果</van-button>
   </van-col>
   <van-col span="4">
    <van-button type="primary" size="small" @click="resultUnfindFn(2)">组数结果</van-button>
   </van-col>
   <van-col span="4">
    <van-button type="primary" size="small" @click="resultUnfindFn(1)">未出现数</van-button>
   </van-col>
   <van-col span="4">
    <van-button type="primary" size="small" @click="saveTempFn">缓存数据</van-button>
   </van-col>
   <van-col span="4">
    <van-button type="primary" size="small" @click="clearTempFn">清空缓存</van-button>
   </van-col>
   <van-col span="4">
    <van-button type="primary" size="small" @click="resultUnfindFn(4)">已录入</van-button>
   </van-col>
   
  <van-popup v-model="popShow" style="width:100vw;height:90vh;" position="bottom">
   <div v-if="type===1">
   <div class="title">未出现的数字</div>
   <van-col span="2" :gutter="2" v-for="item in rea_tab_num_comb_unfind" :key="item.num">
    {{ item.num }}
   </van-col>
  </div>
   <div v-if="type===2">
   <div class="title">组出现次数统计</div>
   <div>
    <van-col span="8">数字<van-icon @click="sortFn(rea_tab_num_comb,'num')" name="sort" /></van-col>
    <van-col span="8">出现次数<van-icon @click="sortFn(rea_tab_num_comb,'count')" name="sort" /></van-col>
    <van-col span="8">无序次数<van-icon @click="sortFn(rea_tab_num_comb,'combCount')" name="sort" /></van-col>
    <div v-for="(item,index) in rea_tab_num_comb" :key="index">
     <van-col :gutter="0" span="8" :class="{'res-tab-fa':index%2===0}">{{ item.num }}</van-col>
     <van-col :gutter="0" span="8" :class="{'res-tab-fa':index%2===0}">{{ item.count }}</van-col>
     <van-col :gutter="0" span="8" :class="{'res-tab-fa':index%2===0}">{{ item.combCount }}</van-col>
    </div>
   </div>
  </div>
  <div v-if="type===3">
   <div class="title">单数出现次数统计</div>
    <div>
      <van-col span="12">数字<van-icon @click="sortFn(rea_tab_num_sigle,'num')" name="sort" /></van-col>
      <van-col span="12">出现次数<van-icon @click="sortFn(rea_tab_num_sigle,'count')" name="sort" /></van-col>
      <div v-for="(item,index) in rea_tab_num_sigle" :key="index">
       <van-col :gutter="0" span="12" :class="{'res-tab-fa':index%2===0}">{{ item.num }}</van-col>
       <van-col :gutter="0" span="12" :class="{'res-tab-fa':index%2===0}">{{ item.count }}</van-col>
     </div>
   </div>
  </div>
  <div v-if="type===4">
   <div class="title">已录入数字</div>
   <van-col span="2" :gutter="2" v-for="(item,index) in save_list" :key="index">
    {{ item }}
   </van-col>
  </div>
  </van-popup>
 </div>
</template>

<script>
export default{
 components:{},
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
     return {
      type:0,
      popShow:false,
      num_list:[],
      rea_tab_num_comb:[],
      rea_tab_num_comb_unfind:[],
      numVal:'',
      save_list:[],
      rea_tab_num_sigle:[]
       }
  },
  watch:{
  },
  mounted(){
   this.init()
  },
  methods: {
   init(){
    this.save_list = localStorage.save_list?localStorage.save_list.split(','):[]
    for (let index = 0; index < 1000; index++) {
     let numStr = parseInt(index/100)  + '' + parseInt((index/10)%10) + parseInt((index%10)%10)
     this.num_list.push(numStr)
    }
   },
   resultUnfindFn(type){
    this.resultFn()
    if(type===1){
     this.rea_tab_num_comb_unfind = this.rea_tab_num_comb.filter(item=>item.count===0)
    }
    this.type = type
    this.popShow = true
   },
   submitFn(){
     let numStr = parseInt(this.numVal/100)  + '' + parseInt((this.numVal/10)%10) + parseInt((this.numVal%10)%10)
     this.save_list.push(numStr)
     this.numVal = ''
   },
   findStr(a,b){
    let a_arr = [parseInt(a/100),parseInt((a/10)%10),parseInt(a%10%10)].sort((p,c)=>p-c)
    let b_arr = [parseInt(b/100),parseInt((b/10)%10),parseInt(b%10%10)].sort((p,c)=>p-c)

    let a_temp = ''
    a_arr.map(i=>{a_temp += i})
   
    let b_temp = ''
    b_arr.map(i=>{b_temp += i})
    
    return a_temp === b_temp
   },
   resultFn(){
    // 数组统计
    this.rea_tab_num_comb = []
    for (let index = 0; index < this.num_list.length; index++) {
     this.rea_tab_num_comb.push({num:this.num_list[index],count:0,combCount:0})
    }
    for (let index = 0; index < this.save_list.length; index++) {
     this.rea_tab_num_comb.map(item=>{
      if(item.num.search(this.save_list[index])!==-1){
       item.count+=1
      }
      if(this.findStr(item.num, this.save_list[index])){
       item.combCount+=1
      }
     })
    }
    // 单数统计
    this.rea_tab_num_sigle = []
    for (let index = 0; index < 10; index++) {
     this.rea_tab_num_sigle.push({num:index,count:0})
    }
    let str = ''
    this.save_list.map(item=>{
     str+=item
    })
    for (let index = 0; index < str.length; index++) {
     let temp =  this.rea_tab_num_sigle.filter(item=>item.num==str[index])
     if(temp.length){
      temp[0].count+=1
     }
    }
   },
   saveTempFn(){
    localStorage.save_list = this.save_list;
    this.$notify({ type: 'primary', message: '已保存' });
   },
   clearTempFn(){
    this.$dialog.confirm({
     title: '提示',
     message: '确认清空缓存？',
   })
     .then(() => {
      localStorage.clear()
      Object.assign(this.$data, this.$options.data.call(this));
      this.init()
      this.$notify({ type: 'primary', message: '已清空' });
     })
     .catch(() => {
       // on cancel
     });
    
   },
   sortFn(data,prop){
    data.sort((a, b)=>a[prop]-b[prop])
   }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.res-tab-fa{
 /* border: 1px solid #ccc; */
 background-color: #ccc;
}
.title{
 line-height: 2rem;
 font-size: 1.2rem;
 font-weight: 900;
}
</style>
